.tk-button {
  height: 2rem;
  border-radius: 0.5rem;
  background-color: var(--buttonPrimaryBackground);
  border: 0.0625rem solid transparent;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  padding: 0.375rem 1rem;
  color: var(--labelDarkBackgroundPrimary);
  font-size: 1rem;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.2;

  &:hover {
    background-color: var(--buttonPrimaryBackgroundActive);
  }

  &--medium {
    font-size: 0.9rem;
  }

  &--small {
    font-size: 0.8rem;
  }

  &--hollow {
    background-color: var(--buttonSecondaryBackground);
    border: 0;
    color: var(--buttonSecondaryLabel);

    &:hover {
      background-color: var(--buttonSecondaryBackgroundActive);
    }
  }

  &--text {
    border: none;
    color: var(--actionPrimary);
    background: transparent;
    background-color: transparent;
    border-radius: 1000px;
    padding: 0.25rem 0.75rem;
    height: unset;

    &:hover {
      background-color: var(--buttonPrimaryBackground);
      color: var(--labelDarkBackgroundPrimary);
    }

    &.tk-button--hollow {
      &:hover {
        background-color: transparent;
        color: var(--actionPrimaryActive);
      }
    }
  }

  &--disabled {
    background: transparent;
    background-color: transparent;
    color: var(--labelSecondary);
    cursor: not-allowed;

    &:hover {
      background: transparent;
      background-color: transparent;
      color: var(--labelSecondary) !important;
    }
  }
}
